<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<!-- <el-date-picker class="x_soso" v-model="search.payBTime" type="date" value-format="yyyy-MM-dd" placeholder="起始时间"></el-date-picker>
				<el-date-picker class="x_soso" v-model="search.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker> -->
				<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入店长名称/店长电话/归属代理商电话搜索"></el-input>
				<el-button type="primary" @click="searchList">查询</el-button>
				
			</div>
			<div style="text-align: left;"> 
				<el-button type="primary" @click="reloadVal">刷新</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="店长头像" align="center" width="150" prop="memImg">
					<template slot-scope="scope">
						<img :src="scope.row.memImg" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="店长姓名" align="center" width="150" prop="memName"></el-table-column>
				<el-table-column label="手机号" align="center" width="150" prop="memPhone"></el-table-column>
				<el-table-column label="门店名字" align="center" width="150" prop="shopName"></el-table-column>
				<el-table-column label="门头照" align="center" width="150" prop="shopImg">
					<template slot-scope="scope">
						<img :src="scope.row.shopImg" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="门店LOGO" align="center" width="150" prop="shopLogo">
					<template slot-scope="scope">
						<img :src="scope.row.shopLogo" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="详细地址" align="center" width="150" prop="addressDetail"></el-table-column>
				<el-table-column label="美容师数量" width="180" align="center" prop="shopEmpCount"></el-table-column>
				<el-table-column label="门店标签" align="center" width="150" prop="shopLable"></el-table-column>
				<el-table-column label="门店类型" align="center" width="150" prop="shopType">
					<template scope="scope">
						<span v-if="scope.row.shopType == 1">加盟</span>
						<span v-if="scope.row.shopType == 2">挂靠</span>
						<span v-if="scope.row.shopType == 3">直属</span>
					</template>
				</el-table-column>
				<el-table-column label="代理商名称" align="center" width="150" prop="ageName"></el-table-column>
				<el-table-column label="代理商电话" align="center" width="150" prop="agePhone"></el-table-column>
				<el-table-column label="修改时间" align="center" width="150" prop="createTime"></el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="250">
					<template slot-scope="scope">
						<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">更换代理商</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page.page"
					:page-size="page.pagesize"
					layout="prev, pager, next, jumper, total"
					:total="page.count"
				></el-pagination>
			</div>
			<!-- 弹出框 -->
			<el-dialog title :visible.sync="dialogColor" width="720px" height="600px" style="overflow: scroll;" :close-on-click-modal="false">
				<el-card shadow="never">
					<div style="clear:both"></div><!-- /电话+当前所属代理商名称/电话 -->
					<div style="display: flex;width: 100%;">
						<img :src="memImg" alt="" style="width: 80px;height: 80px;">
						<div style="display: flex;flex-direction: column;margin-left: 20px;">
							<div style="padding: 10px 0;box-sizing: border-box;">店长名称:{{memName}}</div>
							<div style="padding: 10px 0;box-sizing: border-box;">{{memPhone}}</div>
						</div>
					</div>
					<div style="width: 100%;border-radius: 15px;background: #EAEAEA;display: flex;justify-content: space-between;padding: 20px;box-sizing: border-box;margin: 20px 0;">
						<div v-if="ageName">代理商名称:{{ageName}}</div>
						<div v-if="agePhone">电话：{{agePhone}}</div>
					</div>
				</el-card>
				<el-card shadow="never" style="margin-top: 10px;">
					<div style="margin: 10px 0;font-size: 20px;text-align: left !important;">更换代理商</div>
					<div style="text-align: left;">
						<el-input class="x_soso" v-model="searchName" placeholder="请输入代理商名称/店代理商电话"></el-input>
						<el-button type="primary" @click="searchTableList">查询</el-button>
					</div>
					<el-table v-loading="loading" :data="tableDataList" highlight-current-row @current-change="handlecurrentChange" style="width: 100%;margin-top: 20px">
						
						<el-table-column label="代理商名称" align="center" width="200" prop="ageName"></el-table-column>
						<el-table-column label="代理商电话" align="center" width="150" prop="agePhone"></el-table-column>
						<el-table-column label="代理商描述" align="center"   prop="addressDetail"></el-table-column>
					</el-table>
					<div style="margin-top: 20px;text-align: right">
						<el-pagination
							background
							@current-change="shopListData"
							:current-page="page2.page"
							:page-size="page2.pagesize"
							layout="prev, pager, next, jumper, total"
							:total="page2.count"
						></el-pagination>
					</div>
				</el-card>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogColor = false">取 消</el-button>
					<el-button type="primary" @click="yesChange">确认更换</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
import { shopApplyList,agentDownList,editShopAge } from '../../../server/index.js';
import Cookie from 'js-cookie';
export default {
	inject:['reload'], 
	data() {
		return {
			valueDate: [],
			searchName: '',
			loading: true,
			tableData: [],
			tableDataList: [],
			ruleForm: {},
			search: {},
			rankList: [],
			page: {
				count: 0,
				pagesize: 5,
				page: 1
			},
			page2: {
				count: 0,
				pagesize: 5,
				page: 1
			},
			dialogColor: false,
			cname: '',
			ageId: '',
			shopId:'',
			shopName:'',
			memPhone:'',
			ageName:'',
			memName:'',
			agePhone:'',
			memImg:''
		};
	},
	mounted() {
		var page = 1;
		this.columnFind(page);
		this.shopListData(page);
		Cookie.remove('tabList');
	},
	methods: {
		searchList() {
			this.columnFind(1);
		},
		//更换代理商
		searchTableList() {
			this.shopListData(1)
		},
		// 刷新
		reloadVal(){
			this.reload();
		},
		// 分页
		columnFind(page) {
			const _this = this;
			_this.page.page = page;
			let startTime = _this.valueDate[0];
			let endTime = _this.valueDate[1];
			let obj = {
				page: _this.page.page,
				rows: _this.page.pagesize,
				startCreateTime: undefined == startTime ? '' : startTime,
				endCreateTime: undefined == endTime ? '' : endTime,
				keyword:undefined == _this.search.searchInput ? '' : _this.search.searchInput
			};
			_this.loading = false;
			_this.http.request({
				url: shopApplyList,
				data: obj,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total
				},
				error:function(err){
					_this.$message({
						offset: '200',
						message: err.msg
					})
				}
			});
		},
		//更换代理商数据
		shopListData(page) {
			const _this = this;
			_this.page2.page = page;
			let obj = {
				page: _this.page2.page,
				rows: _this.page2.pagesize,
				keyword: _this.searchName==undefined?'':_this.searchName
			};
			_this.http.request({
				url: agentDownList,
				data: obj,
				success: function(res) {
					_this.tableDataList = res.list;
					_this.page2.count = res.total;
				},
				// error:function(err){
				// 	_this.$message({
				// 		offset: '200px',
				// 		message: err.msg
				// 	})
				// }
			});
		},
		cellClick(res) {
			const _this = this;
			_this.cname = '更换代理商';
			_this.dialogColor = true;
			_this.shopId = res.shopId;
			if(res && res.memName){
				_this.memName = res.memName;
			}
			if(res && res.memPhone){
				_this.memPhone = res.memPhone;
			}
			if(res && res.agePhone){
				_this.agePhone = res.agePhone;
			}
			if(res && res.ageName){
				_this.ageName = res.ageName;
			}
			if(res && res.memImg){
				_this.memImg = res.memImg;
			}
		},
		//单选行
		handlecurrentChange(val) {
			const _this = this;
			_this.ageId = val.ageId;
		},
		yesChange() {
			const _this = this;
			if (_this.memId == '') {
				this.$message({
					message:'请选择一个店铺名称，店铺名称不能为空',
					offset:350
				});
				return;
			}
			_this.$confirm('此操作将更换代理商, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				})
				.then(() => {
					_this.http.request({
						url: editShopAge,
						data: {
							ageId: _this.ageId,
							shopId: _this.shopId
						},
						success: function(){
							_this.dialogColor = false;
							_this.reload();
						},
						error:function(err){
							_this.$message({
								offset: '200',
								message: err.msg
							})
						}
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
	.el-button--primary{
		background: rgba(113, 106, 202, 1);
		border: none;
	}
	.el-button--primary:hover{
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}
	.el-form-item__label {
		width: 120px !important;
	}
	.el-button--warning {
		color: #FFF;
		background-color: #F4516C;
		border-color: #F4516C;
	}
</style>

